<template>
    <div v-if="detailStatus" class="m-detail-modal">
        <div class="header">
            交易流水明细
            <span @click="close"><Icon type="close-round"></Icon></span>
        </div>
        <div class="content">
            <div class="list-header">车商信息:</div>
            <Row class-name="list-row">
                <Col span="12">
                车辆名称：<span>{{detailData.car_name}}</span>
                </Col>
                <Col span="12">
                所属市场：<span>{{detailData.bazzar_title}}</span>
                </Col>
            </Row>
            <Row class-name="list-row">
                <Col span="12">
                车行名称：<span>{{detailData.dealer_name}}</span>
                </Col>
                <Col span="12">
                联系人：<span>{{detailData.dealer_contacts}}</span>
                </Col>
            </Row>
            <Row class-name="list-row">
                <Col span="12">
                联系电话：<span>{{detailData.dealer_tel}}</span>
                </Col>
            </Row>

            <div class="list-header">交易订单信息:</div>
            <Row class-name="list-row">
                <Col span="12">
                交易流水号：<span>{{detailData.paymentdocument_no}}</span>
                </Col>
                <Col span="12">
                订单号：<span>{{detailData.sales_no}}</span>
                </Col>
            </Row>
            <Row class-name="list-row">
                <Col span="12">
                收款人：<span>{{detailData.qzt_real_name}}</span>
                </Col>
                <Col span="12">
                订单金额：<span>{{detailData.sales_price}}</span>
                </Col>
            </Row>
            <Row class-name="list-row">
                <Col span="12">
                交易金额：<span>{{detailData.amount}}</span>
                </Col>
                <Col span="12">
                刷卡卡种：<span>{{detailData.bankCardTypeStr}}</span>
                </Col>
            </Row>
            <Row class-name="list-row">
                <Col span="12">
                车商手续费：<span>{{detailData.profitAmount}}</span>
                </Col>
                <Col span="12">
                企帐通手续费：<span>{{detailData.clearAmount}}</span>
                </Col>
            </Row>
            <Row class-name="list-row">
                <Col span="12">
                交易状态：<span>{{detailData.pay_statusStr}}</span>
                </Col>
                <Col span="12">
                交易时间：<span>{{detailData.tradeTime}}</span>
                </Col>
            </Row>
            <div class="list-header">返回信息:</div>
            <Row class-name="list-row">
                <Col span="12">
                返还金额：<span>{{detailData.return_amount}}</span>
                </Col>
                <Col span="12">
                返还费率：<span>{{detailData.return_rate}}%</span>
                </Col>
            </Row>
            <Row class-name="list-row">
                <Col span="12">
                返还人编号：<span>{{detailData.return_people_no}}</span>
                </Col>
                <Col span="12">
                返还人名字：<span>{{detailData.return_people_name}}</span>
                </Col>
            </Row>
            <Row class-name="list-row">
                <Col span="12">
                返还状态：<span>{{cardText2}}</span>
                </Col>
                <Col span="12">
                是否可返还：<span>{{cardText3}}</span>
                </Col>
            </Row>
          <!--  <Row>
                <Col span="10">
                <Button type="primary" @click="handleFunction" style="float: right;margin: 20px">返还审核</Button>
                <Button type="primary" @click="returnFunction" style="float: right;;margin: 20px">手动返还</Button>
                </Col>

            </Row>-->

        </div>
        <Modal v-model="audit_modal" :title="'审核返回金额订单'" >
            <div style="margin-bottom: 10px;margin-top: 20px">
                <Form  :label-width="150">
                    <FormItem label="审核状态：">
                        <RadioGroup v-model="audit_status">
                            <Radio label="1">允许返还</Radio>
                            <Radio label="0">拒绝返还</Radio>
                        </RadioGroup>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <Button type="ghost" size="large" @click="closeModle">取消</Button>
                <Button type="primary" size="large" @click="audit_confrom">保存</Button>
            </div>
        </Modal>

        <Modal v-model="return_modal" :title="'手动返还'" >
            <div style="margin-bottom: 10px;margin-top: 20px;text-align: center">
                <span style="font-size: 16px">是否确认返还？</span>
            </div>
            <div slot="footer">
                <Button type="ghost" size="large" @click="closeModal">取消</Button>
                <Button type="primary" size="large" @click="return_confrom">确认</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import qs from 'qs'
    export default {
        props: ['detailData','detailStatus','return_id'],
        data() {
            return {
                return_modal:false,
                return_id2:this.return_id,
                audit_status:this.detailData.is_return,
                audit_modal:false,
            }
        },
        methods: {
            //确认返还
            return_confrom(){
                if(this.return_id2==undefined){
                    this.return_modal=false;
                    this.$Message.error("找不到返回的ID");
                    return;
                }
                this.axios.post("/zscar-api/sales/order/manualReturnRecording?"+ qs.stringify({ReturnRecordingId:this.return_id2})).then(response => {
                    if (response.data.code === 1) {
                        this.$Message.success(response.data.msg)
                    } else {
                        this.$Message.error(response.data.msg);
                    }
                }, response => {
                    this.$Message.error('网络异常!');
                });
                this.return_modal=false;
            },
            returnFunction(){
                if(this.return_id2==undefined){
                    this.$Message.error("找不到返回的ID");
                    return;
                }
                this.return_modal=true;
            },
            handleFunction(){
                if(this.return_id2==undefined){
                    this.$Message.error("找不到返回的ID");
                    return;
                }
                this.audit_modal=true;

            },
            audit_confrom(){
                if(this.return_id2==undefined){
                    this.$Message.error("找不到返回的ID");
                    this.audit_modal=false;
                    return;
                }
                this.axios.post("/zscar-api/sales/order/updateReturnRecording?"+ qs.stringify({ReturnRecordingId:this.return_id2,is_return:this.audit_status})).then(response => {
                    if (response.data.code === 1) {
                        this.$Message.success(response.data.msg)
                    } else {
                        this.$Message.error(response.data.msg);
                    }
                }, response => {
                    this.$Message.error('网络异常!');
                });
                this.audit_modal=false;
            },
            closeModle(){
                this.audit_modal=false;
            },
            close() {
                this.$emit('closeModal')
            }
        },
        computed:{
            cardText(){
                let text = '';

                switch (this.detailData.bankCardType) {
                    case 'DEBITCARD':
                        text = '借记卡';
                        break;
                    case 'CREDITCARD':
                        text = '贷记卡';
                        break;
                    case 'STANDARD_CREDITCARD':
                        text = '准贷记卡';
                        break;
                    case 'DEBITANDCREDITCARD':
                        text = '借贷一体卡';
                        break;
                    default:
                        text = '';
                }
                return text;
            },
            cardText2(){
                let text = '';
                switch (this.detailData.return_status) {
                    case '0':
                        text = '未返还';
                        break;
                    case '1':
                        text = '返还成功';
                        break;
                    case '2':
                        text = '返还失败';
                        break;
                    default:
                        text = '';
                }
                return text;
            },
            cardText3(){
                let text = '';
                switch (this.detailData.is_return) {
                    case '0':
                        text = '否';
                        break;
                    case '1':
                        text = '是';
                        break;
                    default:
                        text = '';
                }
                return text;
            }
        }
    }
</script>
<style lang="scss" scoped>
    .m-detail-modal {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #fff;
        z-index: 100;

    .header {
        background-color: #f8f8f9;
        height: 45px;
        line-height: 45px;
        font-size: 16px;
        padding-left: 25px;
        padding-right: 5px;
        color: #000;
        box-shadow: 1px 1px 1px rgba(220, 172, 172, .5);

    span {
        float: right;
        padding: 0 20px;
        cursor: pointer;
    }

    }
    .content {
        font-size: 14px;
        padding: 15px 50px 150px 25px;
        overflow-y: auto;
    }

    .list-header {
        height: 45px;
        color: #333;
        line-height: 45px;
    }

    .list-row {
        padding-left: 100px;
        font-size: 14px;
        line-height: 40px;
    }

    .list-row img {
        width: 100px;
        height: auto;
    }

    .car-header {
        background-color: #f7f7f7;
        padding-left: 15px;
        border: 1px solid #e9eaec;
        border-radius: 2px;
    }

    }
</style>
